<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<h2 mat-dialog-title>Provenance Event</h2>
<div class="provenance-event">
    <mat-tab-group [(selectedIndex)]="selectedIndex" (selectedIndexChange)="tabChanged($event)">
        <mat-tab label="Details">
            <mat-dialog-content>
                <div class="dialog-tab-content">
                    <div class="flex">
                        <div class="w-1/2 pr-2 flex flex-col gap-y-3">
                            <div class="flex flex-col">
                                <div>Time</div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatValue;
                                        context: { $implicit: request.event.eventTime, title: request.event.eventTime }
                                    "></ng-container>
                            </div>
                            <div class="flex flex-col">
                                <div>Event Duration</div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatDuration;
                                        context: { $implicit: request.event.eventDuration }
                                    "></ng-container>
                            </div>
                            <div class="flex flex-col">
                                <div>Lineage Duration</div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatDuration;
                                        context: { $implicit: request.event.lineageDuration }
                                    "></ng-container>
                            </div>
                            <div class="flex flex-col">
                                <div>Type</div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatValue;
                                        context: { $implicit: request.event.eventType, title: request.event.eventType }
                                    "></ng-container>
                            </div>
                            <div class="flex flex-col">
                                <div>FlowFile UUID</div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatCopyableValue;
                                        context: {
                                            $implicit: request.event.flowFileUuid,
                                            title: request.event.flowFileUuid
                                        }
                                    "></ng-container>
                            </div>
                            <div class="flex flex-col">
                                <div>File Size</div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatValue;
                                        context: {
                                            $implicit: request.event.fileSize,
                                            title: request.event.fileSizeBytes + ' bytes'
                                        }
                                    "></ng-container>
                            </div>
                            <div class="flex flex-col">
                                <div>Component Id</div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatCopyableValue;
                                        context: {
                                            $implicit: request.event.componentId,
                                            title: request.event.componentId
                                        }
                                    "></ng-container>
                            </div>
                            <div class="flex flex-col">
                                <div>Component Name</div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatValue;
                                        context: {
                                            $implicit: request.event.componentName,
                                            title: request.event.componentName
                                        }
                                    "></ng-container>
                            </div>
                            <div class="flex flex-col">
                                <div>Component Type</div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatValue;
                                        context: {
                                            $implicit: request.event.componentType,
                                            title: request.event.componentType
                                        }
                                    "></ng-container>
                            </div>
                            <div class="flex flex-col">
                                <div>Details</div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatValue;
                                        context: { $implicit: request.event.details, title: request.event.details }
                                    "></ng-container>
                            </div>
                            <ng-container *ngIf="request.event.eventType === 'RECEIVE'">
                                <div class="flex flex-col">
                                    <div>Source FlowFile Id</div>
                                    <ng-container
                                        *ngTemplateOutlet="
                                            formatCopyableValue;
                                            context: {
                                                $implicit: request.event.sourceSystemFlowFileId,
                                                title: request.event.sourceSystemFlowFileId
                                            }
                                        "></ng-container>
                                </div>
                                <div class="flex flex-col">
                                    <div>Transit Uri</div>
                                    <ng-container
                                        *ngTemplateOutlet="
                                            formatValue;
                                            context: {
                                                $implicit: request.event.transitUri,
                                                title: request.event.transitUri
                                            }
                                        "></ng-container>
                                </div>
                            </ng-container>
                            <ng-container *ngIf="request.event.eventType === 'SEND'">
                                <div class="flex flex-col">
                                    <div>Transit Uri</div>
                                    <ng-container
                                        *ngTemplateOutlet="
                                            formatValue;
                                            context: {
                                                $implicit: request.event.transitUri,
                                                title: request.event.transitUri
                                            }
                                        "></ng-container>
                                </div>
                            </ng-container>
                            <ng-container *ngIf="request.event.eventType === 'ADDINFO'">
                                <div class="flex flex-col">
                                    <div>Alternate Identifier Uri</div>
                                    <ng-container
                                        *ngTemplateOutlet="
                                            formatValue;
                                            context: {
                                                $implicit: request.event.alternateIdentifierUri,
                                                title: request.event.alternateIdentifierUri
                                            }
                                        "></ng-container>
                                </div>
                            </ng-container>
                            <ng-container *ngIf="request.event.eventType === 'ROUTE'">
                                <div class="flex flex-col">
                                    <div>Relationship</div>
                                    <ng-container
                                        *ngTemplateOutlet="
                                            formatValue;
                                            context: {
                                                $implicit: request.event.relationship,
                                                title: request.event.relationship
                                            }
                                        "></ng-container>
                                </div>
                            </ng-container>
                            <ng-container *ngIf="request.event.eventType === 'FETCH'">
                                <div class="flex flex-col" *ngIf="request.event.eventType === 'FETCH'">
                                    <div>Transit Uri</div>
                                    <ng-container
                                        *ngTemplateOutlet="
                                            formatValue;
                                            context: {
                                                $implicit: request.event.transitUri,
                                                title: request.event.transitUri
                                            }
                                        "></ng-container>
                                </div>
                            </ng-container>
                            <ng-container *ngIf="request.event.clusterNodeId">
                                <div class="flex flex-col">
                                    <div>Node Address</div>
                                    <ng-container
                                        *ngTemplateOutlet="
                                            formatValue;
                                            context: {
                                                $implicit: request.event.clusterNodeAddress,
                                                title: request.event.clusterNodeAddress
                                            }
                                        "></ng-container>
                                </div>
                            </ng-container>
                            <ng-template #formatDuration let-duration>
                                <ng-container *ngIf="duration != null; else noDuration">
                                    <div class="tertiary-color font-medium">
                                        {{ formatDurationValue(duration) }}
                                    </div>
                                </ng-container>
                                <ng-template #noDuration>
                                    <div class="unset neutral-color">No value set</div>
                                </ng-template>
                            </ng-template>
                        </div>
                        <div class="w-1/2 pl-2 flex flex-col gap-y-3">
                            <div class="flex flex-col">
                                <div class="font-bold primary-color">
                                    Parent FlowFiles ({{ request.event.parentUuids.length }})
                                </div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatUuids;
                                        context: { $implicit: request.event.parentUuids, emptyMessage: 'No parents' }
                                    "></ng-container>
                            </div>
                            <div class="flex flex-col">
                                <div class="font-bold primary-color">
                                    Child FlowFiles ({{ request.event.childUuids.length }})
                                </div>
                                <ng-container
                                    *ngTemplateOutlet="
                                        formatUuids;
                                        context: { $implicit: request.event.childUuids, emptyMessage: 'No children' }
                                    "></ng-container>
                            </div>
                            <ng-template #formatUuids let-uuids let-emptyMessage="emptyMessage">
                                <ng-container *ngIf="uuids.length > 0; else noUuids">
                                    <div class="tertiary-color font-medium">
                                        <div *ngFor="let uuid of uuids">{{ uuid }}</div>
                                    </div>
                                </ng-container>
                                <ng-template #noUuids>
                                    <div class="unset neutral-color">{{ emptyMessage }}</div>
                                </ng-template>
                            </ng-template>
                        </div>
                    </div>
                </div>
            </mat-dialog-content>
        </mat-tab>
        @if (request.event.attributes !== undefined) {
            <mat-tab label="Attributes">
                <mat-dialog-content>
                    <div class="dialog-tab-content">
                        <div class="flex flex-col gap-y-4">
                            <div class="flex justify-between">
                                <div class="font-bold primary-color">Attribute Values</div>
                                <div class="flex items-center gap-x-1">
                                    <mat-checkbox [(ngModel)]="onlyShowModifiedAttributes"></mat-checkbox>
                                    <div>Show modified attributes only</div>
                                </div>
                            </div>
                            <div class="flex flex-col">
                                @for (attribute of request.event.attributes; track attribute.name) {
                                    <div *ngIf="shouldShowAttribute(attribute)" class="mb-4 flex flex-col">
                                        <div>{{ attribute.name }}</div>
                                        <ng-container
                                            *ngTemplateOutlet="
                                                formatValue;
                                                context: { $implicit: attribute.value, title: attribute.value }
                                            "></ng-container>
                                        <ng-container *ngIf="attributeValueChanged(attribute)">
                                            <ng-container
                                                *ngTemplateOutlet="
                                                    formatValue;
                                                    context: {
                                                        $implicit: attribute.previousValue,
                                                        title: attribute.previousValue
                                                    }
                                                "></ng-container>
                                        </ng-container>
                                    </div>
                                }
                            </div>
                        </div>
                    </div>
                </mat-dialog-content>
            </mat-tab>
        }
        <mat-tab label="Content">
            <mat-dialog-content>
                <div class="dialog-tab-content">
                    <div class="flex flex-col gap-y-4">
                        <div class="flex">
                            <div class="w-1/2 pr-2">
                                <div class="font-bold primary-color">Input Claim</div>
                                <div class="flex flex-col gap-y-3">
                                    <div>
                                        <div>Container</div>
                                        <ng-container
                                            *ngTemplateOutlet="
                                                formatContentValue;
                                                context: {
                                                    $implicit: request.event.inputContentClaimContainer,
                                                    title: request.event.inputContentClaimContainer
                                                }
                                            "></ng-container>
                                    </div>
                                    <div>
                                        <div>Section</div>
                                        <ng-container
                                            *ngTemplateOutlet="
                                                formatContentValue;
                                                context: {
                                                    $implicit: request.event.inputContentClaimSection,
                                                    title: request.event.inputContentClaimContainer
                                                }
                                            "></ng-container>
                                    </div>
                                    <div>
                                        <div>Identifier</div>
                                        <ng-container
                                            *ngTemplateOutlet="
                                                formatCopyableContentValue;
                                                context: {
                                                    $implicit: request.event.inputContentClaimIdentifier,
                                                    title: request.event.inputContentClaimIdentifier
                                                }
                                            "></ng-container>
                                    </div>
                                    <div>
                                        <div>Offset</div>
                                        <ng-container
                                            *ngTemplateOutlet="
                                                formatContentValue;
                                                context: {
                                                    $implicit: request.event.inputContentClaimOffset,
                                                    title: request.event.inputContentClaimOffset
                                                }
                                            "></ng-container>
                                    </div>
                                    <div>
                                        <div>Size</div>
                                        <ng-container
                                            *ngTemplateOutlet="
                                                formatContentValue;
                                                context: {
                                                    $implicit: request.event.inputContentClaimFileSize,
                                                    title: request.event.inputContentClaimFileSizeBytes + ' bytes'
                                                }
                                            "></ng-container>
                                    </div>
                                    <div *ngIf="request.event.inputContentAvailable" class="flex">
                                        <button mat-stroked-button (click)="downloadContentClicked('input')">
                                            <i class="fa fa-download"></i>
                                            Download
                                        </button>
                                        <button
                                            *ngIf="contentViewerAvailable"
                                            class="ml-3"
                                            mat-stroked-button
                                            (click)="viewContentClicked('input')">
                                            <i class="fa fa-eye"></i>
                                            View
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="w-1/2 pl-2">
                                <div class="font-bold primary-color">Output Claim</div>
                                <div class="flex flex-col gap-y-3">
                                    <div>
                                        <div>Container</div>
                                        <ng-container
                                            *ngTemplateOutlet="
                                                formatContentValue;
                                                context: {
                                                    $implicit: request.event.outputContentClaimContainer,
                                                    title: request.event.outputContentClaimContainer
                                                }
                                            "></ng-container>
                                    </div>
                                    <div>
                                        <div>Section</div>
                                        <ng-container
                                            *ngTemplateOutlet="
                                                formatContentValue;
                                                context: {
                                                    $implicit: request.event.outputContentClaimSection,
                                                    title: request.event.outputContentClaimSection
                                                }
                                            "></ng-container>
                                    </div>
                                    <div>
                                        <div>Identifier</div>
                                        <ng-container
                                            *ngTemplateOutlet="
                                                formatCopyableContentValue;
                                                context: {
                                                    $implicit: request.event.outputContentClaimIdentifier,
                                                    title: request.event.outputContentClaimIdentifier
                                                }
                                            "></ng-container>
                                    </div>
                                    <div>
                                        <div>Offset</div>
                                        <ng-container
                                            *ngTemplateOutlet="
                                                formatContentValue;
                                                context: {
                                                    $implicit: request.event.outputContentClaimOffset,
                                                    title: request.event.outputContentClaimOffset
                                                }
                                            "></ng-container>
                                    </div>
                                    <div>
                                        <div>Size</div>
                                        <ng-container
                                            *ngTemplateOutlet="
                                                formatContentValue;
                                                context: {
                                                    $implicit: request.event.outputContentClaimFileSize,
                                                    title: request.event.outputContentClaimFileSizeBytes + ' bytes'
                                                }
                                            "></ng-container>
                                    </div>
                                    <div *ngIf="request.event.outputContentAvailable" class="flex">
                                        <button mat-stroked-button (click)="downloadContentClicked('output')">
                                            <i class="fa fa-download"></i>
                                            Download
                                        </button>
                                        <button
                                            *ngIf="contentViewerAvailable"
                                            class="ml-3"
                                            mat-stroked-button
                                            (click)="viewContentClicked('output')">
                                            <i class="fa fa-eye"></i>
                                            View
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-col">
                            <div class="font-bold primary-color">Replay</div>
                            <div
                                *ngIf="request.event.replayAvailable; else replayNotAvailable"
                                class="flex flex-col gap-y-3">
                                <div class="flex flex-col">
                                    <div>Connection Id</div>
                                    <ng-container
                                        *ngTemplateOutlet="
                                            formatCopyableContentValue;
                                            context: {
                                                $implicit: request.event.sourceConnectionIdentifier,
                                                title: request.event.sourceConnectionIdentifier
                                            }
                                        "></ng-container>
                                </div>
                                <div>
                                    <button mat-stroked-button (click)="replayClicked()">
                                        <i class="fa fa-repeat"></i>
                                        Replay
                                    </button>
                                </div>
                            </div>
                            <ng-template #replayNotAvailable>
                                <div>{{ request.event.replayExplanation }}</div>
                            </ng-template>
                        </div>
                    </div>
                </div>
            </mat-dialog-content>
        </mat-tab>
    </mat-tab-group>
    <ng-template #formatValue let-value let-title="title">
        <ng-container *ngIf="value != null; else nullValue">
            <ng-container *ngIf="value === ''; else nonEmptyValue">
                <div class="unset neutral-color">Empty string set</div>
            </ng-container>
            <ng-template #nonEmptyValue>
                <div class="tertiary-color font-medium" *ngIf="title == null; else valueWithTitle">
                    {{ value }}
                </div>
                <ng-template #valueWithTitle>
                    <div class="tertiary-color font-medium truncate" [title]="title">
                        {{ value }}
                    </div>
                </ng-template>
            </ng-template>
        </ng-container>
        <ng-template #nullValue>
            <div class="unset neutral-color">No value set</div>
        </ng-template>
    </ng-template>
    <ng-template #formatCopyableValue let-value let-title="title">
        <ng-container *ngIf="value != null; else nullValue">
            <ng-container *ngIf="value === ''; else nonEmptyValue">
                <div class="unset neutral-color">Empty string set</div>
            </ng-container>
            <ng-template #nonEmptyValue>
                <div [copy]="value" class="tertiary-color font-medium" *ngIf="title == null; else valueWithTitle">
                    {{ value }}
                </div>
                <ng-template #valueWithTitle>
                    <div [copy]="value" class="tertiary-color font-medium truncate" [title]="title">
                        {{ value }}
                    </div>
                </ng-template>
            </ng-template>
        </ng-container>
        <ng-template #nullValue>
            <div class="unset neutral-color">No value set</div>
        </ng-template>
    </ng-template>
    <ng-template #formatContentValue let-value let-title="title">
        <ng-container *ngIf="value != null; else nullValue">
            <div class="tertiary-color font-medium" *ngIf="title == null; else valueWithTitle">
                {{ value }}
            </div>
            <ng-template #valueWithTitle>
                <div class="tertiary-color font-medium truncate" [title]="title">
                    {{ value }}
                </div>
            </ng-template>
        </ng-container>
        <ng-template #nullValue>
            <div class="unset neutral-color">No value previously set</div>
        </ng-template>
    </ng-template>
    <ng-template #formatCopyableContentValue let-value let-title="title">
        <ng-container *ngIf="value != null; else nullValue">
            <div [copy]="value" class="tertiary-color font-medium" *ngIf="title == null; else valueWithTitle">
                {{ value }}
            </div>
            <ng-template #valueWithTitle>
                <div [copy]="value" class="tertiary-color font-medium truncate" [title]="title">
                    {{ value }}
                </div>
            </ng-template>
        </ng-container>
        <ng-template #nullValue>
            <div class="unset neutral-color">No value previously set</div>
        </ng-template>
    </ng-template>

    <mat-dialog-actions align="end">
        <button mat-button mat-dialog-close>Ok</button>
    </mat-dialog-actions>
</div>
